<template>
    <a-layout>
      <!-- 顶部导航栏 -->
      <a-layout-header style="background: #f0c040; width: 100%; padding: 0; display: flex; justify-content: space-between; align-items: center;">
        <a-menu mode="horizontal" :defaultSelectedKeys="['1']" style="flex: 1; background: #f0c040;">
          <a-menu-item key="1">产品</a-menu-item>
          <a-menu-item key="2">解决方案</a-menu-item>
          <a-menu-item key="3">社区</a-menu-item>
          <a-menu-item key="4">源代码</a-menu-item>
          <a-menu-item key="5">价格</a-menu-item>
          <a-menu-item key="6">关于我们</a-menu-item>
        </a-menu>
        <div style="background: #f0c040;">
          <a-space>
            <a-button type="primary" @click="goToLogin">登录 </a-button>
            <a-button type="default" @click="goToRegister">注册</a-button>
          </a-space>
        </div>
      </a-layout-header>
  
      <!-- 主体内容 -->
      <a-layout-content>
        <!-- 轮播图 -->
        <a-carousel autoplay>
          <a-carousel-item>
            <img src="../assets/image/cat.png" alt="TIS" style="width: 100%;" />
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center">
              <h1>TIS</h1>
              <h2>任务激励系统</h2>
              <a-button type="primary" size="large">免费试用</a-button>
              <a-button type="default" size="large" style="margin-left: 10px">专业定制</a-button>
            </div>
          </a-carousel-item>
        </a-carousel>
  
        <!-- 内容展示 -->
        <a-row
          style="margin-top: 20px;margin-left: 20px;"
          ref="contentRef"
          :class="contentClass"
        >
          <a-col :span="8">
                <img src="../assets/image/boy.png" alt="图片1" class="img-card" style="width: 100%;"  />
          </a-col>
          <a-col :span="8" style="margin-left: 20px">
                <img src="../assets/image/girl.png" alt="图片2" class="img-card" style="width: 100%" />
          </a-col>
  
          <a-col :span="6" style="margin-left: 20px; ">
            <!-- 任务激励介绍 -->
            <a-card style="margin-top: 20px; ">
              <template #title>
                <h3>何为任务激励？</h3>
              </template>
              <h4>
                任务激励是一种通过设定目标、奖励机制来促进个人或团队达成既定目标的体系与方式。
                明确的任务目标和奖励机制使个人意识到自己的责任，进而提高工作或学习的。
              </h4>
              <a-button type="default" style="margin-top: 10px">了解更多</a-button>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        TIS Design ©2025 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </template>
  
<script setup>
import { ref, onMounted, onBeforeUnmount} from 'vue';
import router from '../router';


const contentRef = ref(null);
const contentClass = ref('');


const goToLogin = () => {
    router.push({ name:'login' });
};
const goToRegister = () => {
    router.push({ name:'register' });
};

</script>
<style scoped>

.img-card{
border-radius:3% ;
}
</style>